<template>
  <el-dialog
    v-model="dialogVisible"
    :title="getTitle(type)"
    :width="modalWidth"
    :draggable="draggable"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="showClose"
    :center="center"
    :modal="modalMask"
    :before-close="handleClose"
    :fullscreen="fullscreenStatus"
  >
    <div class="header-fullscreen" v-if="fullscreenBtn">
      <el-icon v-if="!fullscreenStatus" @click="handleFullscreen"
        ><FullScreen
      /></el-icon>
      <svg-icon
        v-if="fullscreenStatus"
        style="font-size: 16px"
        :icon-class="'smallfull'"
        @click="handleFullscreen"
      />
    </div>
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" v-if="dialogOption.cancelBtn">{{
          dialogOption.cancelBtnText
            ? dialogOption.cancelBtnText
            : $t("globalSetting.cancelBtn")
        }}</el-button>
        <el-button
          type="primary"
          @click="confirmDialog"
          v-if="dialogOption.confirmBtn && type === 'add'"
        >
          {{
            dialogOption.confirmBtnText
              ? dialogOption.confirmBtnText
              : $t("globalSetting.confirmBtn")
          }}
        </el-button>
        <el-button
          type="primary"
          @click="editDialog"
          v-if="dialogOption.editFormBtn && type == 'edit'"
        >
          {{
            dialogOption.editFormBtnText
              ? dialogOption.editFormBtnText
              : $t("globalSetting.editBtn")
          }}
        </el-button>
        <slot name="footer" :type="type"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const emit = defineEmits();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => false,
  },
  dialogOption: {
    type: Object,
    default: {},
  },
  draggable: {
    type: Boolean,
    default: false,
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  type: {
    type: String,
    default: "add",
  },
  center: {
    type: Boolean,
    default: false,
  },
  modalWidth: {
    type: Number,
    default: 800,
  },
  modalTitle: {
    type: String,
    default: "",
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
  fullscreenBtn: {
    type: Boolean,
    default: false,
  },
  modalMask: {
    type: Boolean,
    default: true,
  },
});
const {
  draggable,
  showClose,
  modelValue,
  type,
  dialogOption,
  modalWidth,
  modalTitle,
  fullscreen,
  fullscreenBtn,
  modalMask,
} = toRefs(props);

const getTitle = computed(() => {
  return (type) => {
    if (type === "add" && dialogOption.value.addTips) {
      return dialogOption.value.addTips;
    } else if (type === "edit" && dialogOption.value.editTips) {
      return dialogOption.value.editTips;
    } else if (type === "view" && dialogOption.value.viewTips) {
      return dialogOption.value.viewTips;
    } else if (type === "add") {
      return t("globalSetting.addText");
    } else if (type === "edit") {
      return t("globalSetting.editText");
    } else if (type === "view") {
      return t("globalSetting.viewText");
    } else if (type === "custom") {
      return modalTitle.value;
    }
  };
});

// 计算双向绑定的值
const dialogVisible = computed({
  get() {
    return modelValue.value;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

// 计算全屏双向绑定的值
const fullscreenStatus = computed({
  get() {
    return fullscreen.value;
  },
  set(value) {
    emit("update:fullscreen", value);
  },
});

function handleClose() {
  emit("handleClose", false);
}

function confirmDialog() {
  emit("confirmDialog", false);
}

function editDialog() {
  emit("editDialog", false);
}

function handleFullscreen() {
  fullscreenStatus.value = !fullscreenStatus.value;
}

defineExpose({
  handleClose,
  confirmDialog,
  editDialog,
});
</script>

<style lang="scss" scoped>
.el-dialog__header {
  padding: 0 !important;
  border-bottom: 1px solid #ccc !important;
  position: relative;
}
.header-fullscreen {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 15px;
  right: 40px;
  cursor: pointer;
}
</style>